<template>
  <div id="countTimeComponent" >
    <slot name="left"></slot>
    {{curMinutes}}{{minutesType}}{{curSeconds}}{{secondsType}}
    <slot name="right"></slot>
  </div>
</template>

<script>
  export default {
    props:{
      // unix服务器传过来的时间戳
      unixTime:{
        required:true
      },
      //间隔时间，即需要倒计时多少时间，单位秒
      gapTime:{
        type:String,
        default:'1800'
      },
      //分后面的自定义内容，默认为 冒号 ：
      minutesType:{
        type:String,
        default:':'
      },
      // 秒后面的自定义内容，默认为 空
      secondsType:{
        type:String,
        default:""
      },
      // 我的订单页面传过来的，判断是 全部，还是咨询 tab。防止触发两次的情况。 0是全部，2是咨询 3是订单详情
      isAll:{
        type:Number,
        default:0
      }
    },
    data:function(){
      return {
        curMinutes:'00',
        curSeconds:"00",
        interTimer:null //定时器标识
      }
    },
    created:function(){
      this.countTime();
    },
    beforeDestroy:function(){
      window.clearInterval(this.interTimer)
    },
    methods:{
      //处理计时
      countTime:function(){
        let sendTime = this.unixTime * 1000;// unix时间戳转换为new Date的毫秒
        let endTime = sendTime + this.gapTime * 1000; //结束的时间（毫秒）
        let currentTime = new Date().getTime(); //当前的毫秒数
        let gapsec = Math.round( (endTime - currentTime)/1000 );
        //如果进来就已经超过时间了
        if(gapsec < 0){
          this.showTime = '00:00';
          if(this.isAll){
            console.log(this.isAll)
            this.$emit('over')
          }
          return;
        }
        //第一次进入则执行一次代码
        this.countHandler(gapsec);

        this.interTimer = setInterval(() => {
          gapsec -- ;
          if(gapsec < 0){
            gapsec = 0;
            window.clearInterval(this.interTimer);
            if(this.isAll){
              this.$emit('over')
            }
          }
          this.countHandler(gapsec);
        }, 1000);
      },
      //处理时间并赋值
      countHandler:function(gapsec){
        let minutes = Math.floor( gapsec / 60 );
        minutes = minutes > 9 ? minutes : '0' + minutes;
        let seconds = Math.floor( gapsec % 60 );
        seconds = seconds > 9 ? seconds : '0' + seconds;
        this.curMinutes = minutes 
        this.curSeconds = seconds;
      }
    }
  }
</script>

<style lang="less" scoped>

</style>